<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="switchTab">
          <el-tab-pane name="brandSet" label="品牌设置">
            <BrandSet ref="brandSet" />
          </el-tab-pane>
          <el-tab-pane name="unit" label="商品单位">
            <UnitCard ref="unitCard" />
          </el-tab-pane>
          <el-tab-pane name="type" label="商品分类">
            <TypeCard ref="typeCard" />
          </el-tab-pane>
          <!-- <el-tab-pane name="field" label="商品字段">
            <FieldCard ref="fieldCard" />
          </el-tab-pane> -->
          <el-tab-pane name="para" label="商品参数">
            <ParaCard ref="paraCard" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import UnitCard from './components/UnitCard/index.vue'
  import TypeCard from './components/TypeCard/index.vue'
  import ParaCard from './components/ParaCard/index.vue'
  import BrandSet from './components/BrandSet/index.vue'
  import { ref, watch } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.goodSet,
  })

  const route = useRoute()
  const activeName = ref(route.query.active == undefined ? 'brandSet' : route.query.active)

  const brandSet = ref()
  const unitCard = ref()
  const typeCard = ref()
  const fieldCard = ref()
  const paraCard = ref()

  // 切换选项
  const switchTab = (tab: TabsPaneContext) => {
    if (activeName.value == tab.props.name) return
    switch (tab.props.name) {
      case 'brandSet':
        brandSet.value.getList()
        break
      case 'unit':
        unitCard.value.getList()
        activeName.value = 'unit'
        break
      case 'type':
        typeCard.value.getList()
        activeName.value = 'type'
        break
      case 'field':
        fieldCard.value.getList()
        activeName.value = 'field'
        break
      case 'para':
        paraCard.value.getList()
        activeName.value = 'para'
        break
    }
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'proSet' && activeName.value === 'para' && paraCard.value) {
        paraCard.value.getList()
      }
    },
  )
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
